<template>
  <el-row :class="personLogin.loginbg?'personLogin':'adminLogin'" :style="personLogin.loginbg?'background:#000':''" >
    <div class="Logintitle">
      <a href="javascript:;">
        <img :src="personLogin.logo?personLogin.logo:'static/img/loginlogo.png'" alt="Logo">
      </a>
      <h2 v-show="!personLogin.logo">物联网人工智能大数据引擎云平台<span>Internet of Things + Artificial Intelligence + Big Data Cloud Platform</span></h2>
    </div>
    <div class="login_wrap clear">
      <div class="logindiv" :style="(personLogin.loginbg&&personLogin.loginSite)?personLogin.loginSite:''" >
        <el-col :span='5' :offset="8" class="loginfrom">
          <img class="personLogo" v-if="personLogin.loginLogoShow" :src="personLogin.logo" alt="logo">
          <h3>注册</h3>
          <el-form :model="ruleForm" status-icon :rules="rules2"  @submit.native.prevent ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item class="login_input" prop="user_name">
              <i class="iconfont icon-ren"></i>
              <el-input v-model="ruleForm.user_name" maxlength="30" placeholder="请输入您的账号"></el-input>
            </el-form-item>
            <el-form-item class="login_input" prop="user_pwd">
              <i class="iconfont icon-suo"></i>
              <el-input type="password" v-model="ruleForm.user_pwd" show-password placeholder="请输入您的密码" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item class="login_input" prop="user_pwd_again">
              <i class="iconfont icon-suo"></i>
              <el-input type="password" v-model="ruleForm.user_pwd_again" show-password placeholder="请再次输入您的密码" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item class="ma-le">
              <el-button class="login_button"  :style="personLogin.loginLogoShow?'':'float:none;'"  type="primary" native-type="submit"   @click="submitForm('ruleForm')">注册</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </div>
    </div>
    <div class="loginLoad" v-show="loginLoad">
      <div>Loading</div>
    </div>
  </el-row>
</template>
<style lang="scss">
  .clear {
    &::after {
      content: "";
      display: block;
      clear: both;
    }
    &::before {
      content: "";
      display: block;
      clear: both;
    }
  }
  #app{
    .adminLogin{
      position: fixed;
    }
  }
  .adminLogin {
    width: 100%;
    height: 100%;
    padding: 2% 0 0 2%;
    position: relative;
    background:url("/static/img/loginbg.jpg") no-repeat;
    background-size: cover;
    #space {
      width: 100%;
      position: absolute;
    }
    .Logintitle{
      display: flex;
      align-items: center;
      height: 53px;
      a{
        display: inline-block;
        margin-left: 57px;
        img{
          max-width: 175px;
          max-height: 58px;
        }
      }
      h2{
        margin-left: 18px;
        display: inline-block;
        vertical-align: top;
        line-height: 1;
        font-size: 27.43px;
        letter-spacing: 10.3px;
        color: #fff;
        font-weight: 500;
        position: relative;

        // background-color: #4158D0;
        // background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #4384b5 100%);
        // -webkit-background-clip: text;
        // color: transparent;

        span{
          font-size: 14.84px;
          display: inline-block;
          letter-spacing: 1px;
          white-space: nowrap;
          position: absolute;
          bottom: -25px;
          border-bottom: 1px solid #fff;
          padding-bottom: 3px;
          left: 0;
          // background-color: #4158D0;
          // background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #4384b5 100%);
          //   -webkit-background-clip: text;
          //   color: transparent;
        }
      }
    }
    .login_wrap {
      width: 90%;
      top:50%;
      transform: translateY(-50%);
      position: absolute;
      display: flex;
      justify-content:flex-end;
      -webkit-box-align: center;
      align-items: center;
      .login_lk {
        float: left;
        margin-top: 4%;
        position: relative;
        width: 49%;
        @keyframes leftnright {
          0% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(30px);
          }
          100% {
            transform: translateY(0);
          }
        }
        #log_img {
          animation: leftnright 10s ease-in-out infinite;
        }
      }
    }
    .logindiv {
      margin-top: 10%;
      max-width: 528px;
      width: 49%;
      background-image: url("/static/img/login_divbg2.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      float: right;
      position: relative;
      .loginfrom {
        position: relative;
        margin: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        z-index: 99;
        padding: 50px 83px 55px;
        text-align: center;
        .personLogo{
          display: none;
        }
        h3{
          color:#fff;
          font-size: 24px;
          font-weight: 500;
          letter-spacing: 3px;
          padding-left: 3px;
          line-height: 1;
        }
        form {
          .save {
            margin-top: 16px;
            color: #dbefff;
            font-size: 14px;
            text-align: left;
            input {
              width: 14px;
              height: 14px;
              border-color: #00e1f5;
              position: relative;
              top: 2px;
            }
            a{
              color:#dbefff;
              &:hover{
                color: #074494;
              }
              float: right;
            }
          }
          .ma-le {
            .el-form-item__content {
              margin-left: 0 !important;
              .login_button {
                margin: 40px auto 0;
                padding: 0;
                width: 100%;
                height: 46px;
                display: block;
                outline: none;
                border: 1px solid #c5defc;
                border-radius: 23px;
                line-height: 46px;
                color: #dbefff;
                font-size: 18px;
                letter-spacing: 3px;
                padding-left: 3px;
                background: transparent;
                transition: all 0.4s;

                &:hover {
                  opacity: 0.9;
                  background: #fff;
                  color:#4898f9;

                }
              }
            }
          }
          .login_input {
            &:first-child{
              margin-top: 24px;
            }
            margin: 32px auto 0;
            width: 100%;
            line-height: 40px;
            .el-form-item__content {
              .iconfont{
                font-size: 24px;
                float: left;
                display: block;
                color: #dbefff;
                margin-left: 3px;
                margin-top: 2px;
              }
              margin-left: 0 !important;
              height: 100%;
              width: 100%;
              border-bottom: 1px solid #cae4fe;
              .el-input {
                width:90%;
                height: 100%;
                position: relative;
                display: inline-block;
                text-align: left;
                margin-top:4px;
                input {
                  width: 100%;
                  height: 100%;
                  line-height: 36px;
                  height: 36px;
                  font-size: 16px;
                  color: #dbefff;
                  outline: none;
                  border: none;
                  background: transparent;
                  &::-webkit-input-placeholder{
                    color: #dbefff;
                  }
                }
              }
              .code{
                position: absolute;
                right: 30px;
                top: 0;
                span{
                  display: block;
                  height: 36px;
                  width: 100px;
                  background: #fff;
                  float: right;
                  margin-right: 7px;
                }
                a{
                  color: #dbefff;
                  float: right;
                  text-decoration:underline;
                }
              }
            }
          }
          .el-form-item.is-error{
            .el-form-item__content{
              border-color: #f65f5f;
            }
            .el-input__validateIcon{
              color: #d9e5fe;
            }
          }
          .el-form-item.is-success{
            .el-input__validateIcon{
              color: #d9e5fe;
            }
          }
          .el-form-item__error{
            color: #f65f5f;
            padding-top: 7px;
          }
        }
      }
    }
  }

  .personLogin{
    z-index: 9;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    background-repeat:no-repeat;
    background-size: 100% 100%;
    .Logintitle{
      display: none;
    }
    .login_wrap {
      width: 100%;
      .login_lk {
        display: none;
      }
    }
    .logindiv {
      max-width: 430px;
      width: 50%;
      position: absolute;
      transform: translate(-50%,-50%);
      left:50%;
      top:50%;
      box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.5);
      float: right;
      border-radius: 5px;

      .loginfrom {
        position: relative;
        margin: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        z-index: 99;
        padding: 30px 35px 10px;
        text-align: center;
        .personLogo{
          display: block;
          position: absolute;
          left:20px;
          bottom:10px;
          max-width:30%;
          max-height: 60px;
        }
        h3{
          display: none;
        }
        form {
          .save {
            margin-top: 16px;
            color: #121212;
            font-size: 14px;
            text-align: left;
            input {
              width: 14px;
              height: 14px;
              border-color: #b2bfc7;
              position: relative;
              top: 2px;
            }
            a{
              color:#121212;
              &:hover{
                color: #7f8a97;
              }
              float: right;
            }
          }
          .ma-le {
            .el-form-item__content {
              margin-left: 0 !important;
              .login_button {
                margin: 30px auto 0;
                padding: 0;
                width: 160px;
                height: 40px;
                display: block;
                outline: none;
                float: right;
                border:none;
                border-radius: 5px;
                line-height: 42px;
                color: #fff;
                font-size: 18px;
                letter-spacing: 3px;
                padding-left: 3px;
                background: #252525;
                transition: all 0.4s;
                &:hover {

                  background:rgba(0,0,0,0.5);

                }
              }
            }
          }
          .login_input {
            &:first-child{
              margin-top: 24px;
            }
            margin: 20px auto 0;
            width: 100%;
            line-height: 40px;
            .el-form-item__content {
              .iconfont{
                font-size: 24px;
                float: left;
                display: block;
                color: #121212;
                margin-left: 3px;
                margin-top: 2px;
              }
              margin-left: 0 !important;
              height: 100%;
              width: 100%;
              border: 1px solid #fff;
              background: #fff;
              border-radius: 5px;
              padding: 3px 0 3px 5px;
              .el-input {
                width:90%;
                height: 100%;
                position: relative;
                display: inline-block;
                text-align: left;
                margin-top:4px;
                input {
                  width: 100%;
                  height: 100%;
                  line-height: 36px;
                  height: 36px;
                  font-size: 16px;
                  color: #121212;
                  outline: none;
                  border: none;
                  padding-left: 10px;
                  background: transparent;
                  &::-webkit-input-placeholder{
                    color: #ccc;
                  }
                }
              }
              .code{
                position: absolute;
                right: 30px;
                top: 0;
                span{
                  display: block;
                  height: 36px;
                  width: 100px;
                  background: #fff;
                  float: right;
                  margin-right: 7px;
                }
                a{
                  color: #121212;
                  float: right;
                  text-decoration:underline;
                }
              }
            }
          }
          .el-form-item.is-error{
            .el-form-item__content{
              border-color: #f65f5f;
            }
            .el-input__validateIcon{
              color: #333;
            }
          }
          .el-form-item.is-success{
            .el-input__validateIcon{
              color: #333;
            }
          }
          .el-form-item__error{
            color: #f65f5f;
            padding-top: 7px;
          }
        }
      }
    }
  }
  .loginLoad{
    position: fixed;
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    text-align: center;
    z-index: 10000;
    background: #1e1e1e;
    font-family: 'Open Sans Condensed', sans-serif;
    &::after{
      content:'Loading';
      width: 100%;
      height: 200px;
      line-height: 200px;
      position: absolute;
      top:50%;
      left:0;
      z-index: 0;
      margin: -100px 0 0 0;
      text-align: center;
      font-size: 5em;
      text-transform: uppercase;
      color: #7a96e4;
      text-shadow: 0 1px 1px rgba(255,255,255, 0.07), 0 -1px 1px rgba(0,0,0, 0.4);
    }
    >div{
      width: 100%;
      height: 200px;
      line-height: 200px;
      position: absolute;
      color: #fff;
      top:50%;
      left:0;
      z-index: 9;
      margin: -100px 0 0 0;
      text-align: center;
      font-size: 5em;
      text-transform: uppercase;
      background:
        radial-gradient(50% 50%,
          rgba(255,255,255,1) 0%,
          rgba(0,198,255,1) 8%,
          rgba(0,198,255,0.7) 9%,
          rgba(0,198,255,0) 15%
        ),
        linear-gradient(top,
          rgba(0,198,255,0) 0%,
          rgba(0,198,255,0.01) 44%,
          rgba(0,198,250,0.6) 49%,
          rgba(255,255,255,1) 50%,
          rgba(0,198,255,0.6) 51%,
          rgba(0,198,255,0.01) 56%,
          rgba(0,198,255,0) 100%
        )
    ;
      background-size: 100%;
      transition: background 0.3s;
      animation: pulse 1.4s;
      animation-iteration-count: infinite;
    }
    @keyframes pulse{
      0%   {background-position:-140px; opacity: 0.02; background-size: 30%;}
      50%  {opacity: 1; background-size: 150%;}
      100%  {background-position:140px; opacity: 0.02; background-size: 220%;}
    }
  }
  .login-error{
    width: 300px;
    padding: 20px;
    border-radius: 3px;
    //background:url(../img/login_input.png) transparent no-repeat;
    // background-size:100% 100%;
    background: rgba(0,0,0,0.3);
    box-shadow: 3px 3px 20px rgba(0,234,255,.3);
    border-radius: 10px;
    border:1px solid rgba(1, 234, 255, 0.6);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    @keyframes box-out-in{
      0%{
        box-shadow:0px 3px 20px rgba(0,234,255,.3);
      }
      50%{
        box-shadow:6px 3px 20px rgba(0,234,255,.7);
      }
      100%{
        box-shadow:0px 3px 20px rgba(0,234,255,.3);
      }
    }
    animation: box-out-in 2s ease-in-out infinite;

    .el-notification__group{
      margin: 0;
      .el-notification__content{
        margin: 0;
        color:#fff;
        opacity: .9;
        font-size: 16px;
        text-shadow:0 0 8px #ff0101,0 0 12px #ff0101;

      }
      .el-notification__closeBtn{
        &:hover{
          opacity: 1;
          color:#ff0101;
        }
        color:#ff0101;
        opacity: .5;
        transition:  0.5s;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
</style>
<script>
  export default {
    data() {
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          return  callback(new Error('请输入密码'));
        } else {
          let str = /^[a-zA-Z0-9_]+$/
          if(!str.test(value)){
            return callback(new Error('密码只能输入大小写英文，数字和下滑线'));
          }
          if (this.ruleForm.user_pwd_again !== '') {
            this.$refs.ruleForm.validateField('user_pwd_again');
          }
          callback();
        }
      };
      let validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.user_pwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          let str = /^[a-zA-Z0-9_]+$/
          if(!str.test(value)){
            return callback(new Error('密码只能输入大小写英文，数字和下滑线'));
          }
          callback();
        }
      };
      //案场编码表单校验，判断案场编码是否存在
      let validateUserName = (rule, value, callback)=>{
        if(this.isDisabled) return callback()
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }else{
          let str = /^[a-z][a-z0-9_]+$/
          if(!str.test(value)){
            return callback(new Error('用户名只能输入小写英文，数字和下滑线,且第一位必须为字母'));
          }
        }
        let url = '/sso/idsmamanger/check_username?username='+ value;
        this.$api.get(url)
        .then(data =>{
          if(data.data.exist){
            callback(new Error('用户名已使用'));
          }else{
            callback();
          }
        })
      }
      return {
        ruleForm: {
          user_name:'',//用户名
          user_pwd:'',//密码
          user_pwd_again:'',//再次输入密码
          // code:"",
        },
        rules2: {
          user_name:[
            { required: true, validator:validateUserName, trigger: "blur"},
          ],
          user_pwd: [
            { required: true, validator:validatePass, trigger: "blur"},
            { min: 6, max: 20, message: "密码长度在 6 到 20 个字符", trigger: "blur"}
          ],
          user_pwd_again: [
            { required: true, validator:validatePass2, trigger: "blur"},
            { min: 6, max: 20, message: "密码长度在 6 到 20 个字符", trigger: "blur"}
          ],
        },
        personLogin: {},          //个性化配置
        loginLoad: true,
        id_token:this.$route.query.id_token
      };
    },
    created() {
      this.getCheckV();
    },
    mounted() {
      this.personLogin.loginbg = true
    },
    components: {},
    methods: {
      //登陆
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          //console.log(this.ruleForm.user);
          if (valid) {
            this.$Bus.$emit("Loading", true);
            let mode = {};
            mode.username = this.ruleForm.user_name;
            mode.password = this.ruleForm.user_pwd;
            mode.id_token = this.id_token;
            this.$api.post("/sso/idsmamanger/registered", mode)
            .then(data => {
              if (data && data.msg == "success") {
                localStorage.token = data.data.token;
                sessionStorage.headerActive = "";
                localStorage.userName = this.ruleForm.user_name;
                this.$router.replace({name: 'indexSkip'});
              } else {
                this.$notify({
                  message: '注册失败：请重试',
                  customClass: 'login-error',
                  duration: 3000
                });
              }
              this.$Bus.$emit("Loading", false);
            }).catch((err) => {
               console.log(err);
              this.$Bus.$emit("Loading", false);
            });
          } else {
            return false;
          }
        });
      },
      //获取个性化设置
      getPersonConfig() {
        let url = 'noauth/get-system-personalise';
        this.$api.get(url).then(data => {
          if (data.data) {
            if (Object.keys(data.data.data_value).length > 0) {
              //  let mode={};
              //  mode.loginLogoShow=data.data.data_value.loginLogoShow,
              //  mode.loginSite=data.data.data_value.loginSite;
              //  mode.loginbg=data.data.data_value.loginbg;
              //  mode.logo=data.data.data_value.logo;
              this.personLogin = data.data.data_value;
              localStorage.setItem('PersonConfig', JSON.stringify(data.data.data_value));
              this.$Bus.$emit('PersonChange');
            }
            this.loginLoad = false;

          } else {
            this.loginLoad = false;
          }

        }).catch(err => {
           console.log(err);
          this.loginLoad = false;
        })
      },
      //获取系统设置版本号
      getCheckV() {
        this.$api.get('noauth/check-v')
        .then(data => {
          if (data == null) {
            this.loginLoad = false;
            localStorage.removeItem('PersonConfig');
            return
          }
          if (data.data == localStorage.checkV) {
            if (localStorage.PersonConfig) { // 是否存在个性化配置
              this.personLogin = JSON.parse(localStorage.PersonConfig);
              // this.personLogin.logo = true
              // this.personLogin.loginbg = true
              // this.personLogin.loginSite = true
              // this.personLogin.loginLogoShow = true
              this.loginLoad = false;
            } else {
              this.getPersonConfig();
            }
          } else {
            this.getPersonConfig();
          }
          localStorage.checkV = data.data;
          this.$Bus.$emit('Loading',false)
        })
        .catch(err => {
           console.log(err);
          this.loginLoad = false;
          this.$Bus.$emit('Loading',false)
        })
      },
    },
    watch: {}
  };
</script>
